{% extends "market/base.html" %}

{% block header %}
  <h1>
    {{ stock.symbol }}({{ time }})(模拟环境)
    <a class="btn btn-info btn-lg" href="{{ stock.get_absolute_url }}" role="button">当日数据</a>
    
    <a class="btn btn-info btn-lg" href="{{ stock.get_daily_info_url }}" role="button">历史数据</a>

    <a class="btn btn-info btn-lg" href="{{ stock.get_tick_info_url }}" role="button">tick截面</a>
  </h1>
{% endblock header %}

{% block content %}
<div id="container0" style="width: 1200px;height:400px;"></div>
<div id="container1" style="width: 1200px;height:400px;"></div>
<p style="line-height:1.6">
  <h2>走势</h2>
  <ul class="list-group">
    <li class="list-group-item"> 最新价：{{stock.last_price}}</li>
    <li class="list-group-item"> 最高价：{{stock.high}}</li>
    <li class="list-group-item"> 最低价：{{stock.low}}</li>
    <li class="list-group-item"> 涨停价：{{stock.limit_up}}</li>
    <li class="list-group-item"> 跌停价：{{stock.limit_down}}</li>
  </ul>
  
  <h2>盘口</h2>
  <ul class="list-group">
    {% for lv in level5_ask %}
      <li class="list-group-item"> 卖{{forloop.revcounter}}：{{lv.0|default_if_none:"--"}}&nbsp;&nbsp;{{lv.1|default_if_none:"--"}}</li> 
    {% endfor %}
    {% for lv in level5_bid %}
      <li class="list-group-item"> 买{{forloop.counter}}：{{lv.0|default_if_none:"--"}}&nbsp;&nbsp;{{lv.1|default_if_none:"--"}}</li>
    {% endfor %}
  </ul>
  
  <ul class="list-group">
    <li class="list-group-item"> 交易量：{{stock.volume}}</li>
    <li class="list-group-item"> 交易额：{{stock.amount}}</li>
  </ul>
</p>

    <script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
    <script>
        var options = {
            chart: {
                type: 'line'
            },
            title: {
                text: '价格走势'
            },
            xAxis: {
              title: {
                text: '时间'
                },
              categories: {{time_log|safe}}
            },
            yAxis: {
                title: {
                    text: '价格'
                }
            },
            series: [{
                name: '',
                data: {{price_log|safe}}
            },]
        };
        var chart = Highcharts.chart('container0', options);
        
        var options1 = {
            chart: {
                type: 'line'
            },
            title: {
                text: '价格走势'
            },
            xAxis: {
              title: {
                text: 'TICK'
                },
              categories: {{tick|safe}}
            },
            yAxis: {
                title: {
                    text: '价格'
                }
            },
            series: [{
                name: '',
                data: {{price_generated|safe}}
            },]
        };
        var chart = Highcharts.chart('container1', options1);
    </script>

{% endblock content %}
